<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>小米搜索框</title>

        <style type="text/css">
            .container {
                display: flex ;
                flex-flow: row nowrap ;
                border: 5px solid blue ;
            }

            .container>span { 
                width: 50% ;
                height: 50px ;
                line-height: 50px ;
                border: 5px solid orange ;
             }

             /*
             .container:hover { border-color: black ; }
             .container:hover span { border-color: black ; }
             */

             .container:hover ,
             .container:hover span {
                border-color: black ;
             }

             /* 当 .container 内部的 后代 (子孙) 中有 input 之类的元素 获得焦点时，就改变 .container 元素的样式*/
             .container:focus-within { /* :focus-within 伪类 适用于内部包含了 可获取焦点元素 的元素*/
                border-color: red ;
             }

        </style>

    </head>

    <body>

        <div class="container">
            <span >
                <!-- 当输入光标在 输入框内部跳动时就是获得焦点 ( focus )，
                      如果在输入框之外的其它地方点击一下就会导致失去焦点 ( blur ) -->
                <input type="text" name="xxx" >
            </span>
            <span ></span>
        </div>

    </body>

</html>